﻿<template>
    <div>
        <el-form label-width="120px" :model="UpFinanceInvoice" ref="UpFinanceInvoiceref" :rules="rules">
            <el-row>
                <el-col :offset="2" :span="9">
                    <el-form-item label="申请人" prop="ApplyUserId">
                        <el-select width="100%" filterable v-model="UpFinanceInvoice.ApplyUserId" filterable placeholder="请选择请款人" style="width:100%">
                            <el-option value="">请选择申请人</el-option>
                            <el-option value=" ">全部</el-option>
                            <el-option v-for="(v,k) in AllUsers" :value="v.Id" :data-userid="v.Id" :label="v.UserName" v-text="v.UserName" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :offset="2" :span="9">
                    <el-form-item label="部门" prop="DepartmentId">
                        <el-select    v-model="UpFinanceInvoice.DepartmentId" filterable placeholder="请选择部门" style="width:100%">
                            <el-option value="">请选择部门</el-option>
                            <el-option value=" ">全部</el-option>
                            <el-option v-for="(v,k) in AllDepartment" :value="v.Id" :data-userid="v.Id" :label="v.DepartmentName" v-text="v.DepartmentName" />
                        </el-select>
                    </el-form-item>
                </el-col>


            </el-row>

            <el-row>
                <el-col :offset="2" :span="9">
                    <el-form-item label="项目" prop="ProjectId">
                        <el-select v-model="UpFinanceInvoice.ProjectId" filterable placeholder="请选择项目" style="width: 100%">
                            <el-option value="">请选择项目</el-option>
                            <el-option value=" ">全部</el-option>
                            <el-option v-for="(v,k) in AllProject" :value="v.Id" :data-userid="v.Id" :label="v.ProjectName" v-text="v.ProjectName" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :offset="2" :span="9">
                    <el-form-item label="发票类别" prop="InvoiceType">
                        <el-select width="100%" v-model="UpFinanceInvoice.InvoiceType" filterable placeholder="请选择类型" style="width:100%">
                            <el-option label="增值税专用发票" :value="1"></el-option>
                            <el-option label="增值税普通发票" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>


            <el-row>
                <el-col :offset="2" :span="9">
                    <el-form-item label="甲方单位">
                        <el-select v-model="UpFinanceInvoice.CunstomerId" filterable placeholder="请选择甲方单位" style="width: 100%">
                            <el-option value="">请选择甲方单位</el-option>
                            <el-option value=" ">全部</el-option>
                            <el-option v-for="(v,k) in AllCustomer" :value="v.Id" :data-userid="v.Id" :label="v.CustomerCompany"/>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :offset="2" :span="9">
                    <el-form-item label="联系人" prop="ContactUser">
                        <el-input type="text" v-model="UpFinanceInvoice.ContactUser"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :offset="2" :span="9">
                    <el-form-item label="开票内容" prop="Content">
                        <el-input type="text" v-model="UpFinanceInvoice.Content"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :offset="2" :span="9">
                    <el-form-item label="规格">
                        <el-input type="text" v-model="UpFinanceInvoice.Model"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :offset="2" :span="9">
                    <el-form-item label="单位">
                        <el-input type="text" v-model="UpFinanceInvoice.Unit"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :offset="2" :span="9">
                    <el-form-item label="数量">
                        <el-input type="text" v-model="UpFinanceInvoice.Amount"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :offset="2" :span="9">
                    <el-form-item label="单价">
                        <el-input type="text" v-model="UpFinanceInvoice.Price"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :offset="2" :span="9">
                    <el-form-item label="金额" prop="TotalPrice">
                        <el-input type="text" v-model="UpFinanceInvoice.TotalPrice"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :offset="2" :span="9">
                    <el-form-item label="税率（%）" prop="TaxRate">
                        <el-input type="text" v-model="UpFinanceInvoice.TaxRate"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col>
                    <el-form-item label="发票备注">
                        <el-input v-model="UpFinanceInvoice.InvoiceRemark" type="textarea" class="resizeNone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="合同总额及支付阶段说明">
                        <el-input type="text" v-model="UpFinanceInvoice.Remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="图片上传">
<!--                        <el-image v-for="item in imgArray" :src="item" style="height: 146px;width:146px;padding: 0px 3px" :z-index="3000" :preview-src-list="imgArray"></el-image>-->
                        <div class="imagediv">
                            <ImagesAssembly :imglist="imgArray"></ImagesAssembly>
                        </div>
                        <upload-file ref="upload_file_refs" style="display: inline-block;margin-right: 10px;display: block"
                                     content="图片选择"
                                     list_type="picture-card"
                                     btnsize=""
                                     :another-data="AnotherData"
                                     :showfilelist="true"
                                     >
                        </upload-file>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col style="text-align: center">
                    <el-button type="primary" @click="SaveFinance">提交</el-button>
                </el-col>
            </el-row>

        </el-form>
    </div>
</template>
<script>
    import * as publicjs from "/public/Scriput/Public"
    import UploadFile from "../../UploadFile";
    import ImagesAssembly from "../../ImagesAssembly";

    export default {
        components: {
            "upload-file": UploadFile,
            'ImagesAssembly':ImagesAssembly,
        },
        name: 'UpFinanceInvoice',
        props: {
            AllUsers: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllProject: {
                type: Array,
                required: true
            },
            AllCustomer: {
                type: Array,
                required: true
            },
            UpFinanceInvoice: {
                type: Object,
                required: true
            }
        },
        data() {
            var demicalcheck=(rule, value, callback)=>{
                if (!value){
                    return callback(new Error('不能为空'));
                }else{
                    let pattern = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                    if (pattern.test(value)) {
                        callback();
                    } else {
                        callback(new Error('必须数字'));
                    }
                }
            }
            return {
                imgArray: [],
                //文件上传参数
                AnotherData: {
                    FileType: 1024,
                    id: 1,
                    Type: 0,
                    Single: false,
                },
                rules:{
                    TotalPrice:[{ validator: demicalcheck, trigger: 'blur' }],
                    TaxRate:[{ validator: demicalcheck, trigger: 'blur' }],
                    ApplyUserId:[ { required: true, message: '请选择申请人', trigger: 'change' } ],
                    DepartmentId:[ { required: true, message: '请选择部门', trigger: 'change' } ],
                    ProjectId:[ { required: true, message: '请选择项目', trigger: 'change' } ],
                    InvoiceType:[ { required: true, message: '请选择发票类别', trigger: 'change' } ],
                    ContactUser:[ { required: true, message: '请输入联系人', trigger: 'blur' } ],
                    Content:[ { required: true, message: '请输入开票类容', trigger: 'blur' } ],
                },
            }
        },
        watch: {
            UpFinanceInvoice: function (val, oval) {
                this.InitImg();
            },
        },
        created() {
            this.InitImg();
        },
        methods: {
            SaveFinance() {
                let loadding = this.openLoading();
                this.$http.post("/Finance/UpdateFinanceInvoice", { UpFinanceInvoice: this.UpFinanceInvoice }).then((list) => {
                    loadding.close();
                    let result = list.data;
                    if (result.IsSuccess) {
                        this.$message.success(result.Msg)
                        if (this.$refs['upload_file_refs'].fileList.length > 0) {
                            this.AnotherData.id = this.UpFinanceInvoice.Id;
                            this.$refs['upload_file_refs'].submitUpload();
                        }
                        this.$parent.$parent.UpFinanceInvoiceShow = false;
                        this.$parent.$parent.GetFinanceInvoiceDetail();
                    }
                    else {
                        this.$message.error(result.Msg)
                    }

                });
            },
            async InitImg() {
                this.imgArray = await publicjs.GetAllFileByUrl(this.$http, "1024," + this.UpFinanceInvoice.Id);
            },
        },
    }
</script>
<style scoped>
    .imagediv{
        padding: 0px 3px;
    }
</style>
